<template>
  <div class="right">
      <div class="one"><span>出发地：{{plane.address}}</span><span>07月29日 周四</span></div>
      <div class="two">
          <div class="rleft">
            <div class="rleft1">{{plane.startTime}}</div>
            <div class="rleft2">{{plane.startAirport}}</div>
          </div>
          <div class="rmid">
              <div class="time">{{plane.timer}}</div>
              <div class="plane">{{plane.nickname}} | 经济舱</div>
          </div>
          <div class="rright">
            <div class="rright1">{{plane.endTime}}</div>
            <div class="rright2">{{plane.endAirport}}</div>
          </div>
      </div>
      <div class="three">
          <div class="threeleft">
            <div>机票 成人</div>
            <div>机建燃油 成人</div>
            <div>优享套餐</div>
          </div>
          <div class="threeright">
              <div>￥{{jipiaoprice}} x {{this.$store.state.num}}</div>
              <div>￥{{jijianranyou}} x {{this.$store.state.num}}</div>
              <div>￥{{youxiangtaocan}} x {{this.$store.state.num}}</div>
          </div>
      </div>
      <div class="four">
          <div>应付总额</div>
          <div>￥{{zongjia}}</div>
      </div>
      <div class="five">
          退改签行李额规则及供应商信息
      </div>
  </div>
</template>

<script>
export default {
    name:"right",
    data(){
        return{
            plane:{price:0},
            jipiaoprice:0,
            jijianranyou:50,
            youxiangtaocan:50,
        }
    },
    computed:{
        zongjia(){
          var result=0
          result=this.jipiaoprice*this.$store.state.num+this.jijianranyou*this.$store.state.num+this.youxiangtaocan*this.$store.state.num
          return result   
        },
    },
    mounted(){
        console.log(this.$route.query)
        this.plane=this.$route.query.data
        // console.log(this.plane)
        this.jipiaoprice=parseInt(this.plane.price.slice(1,-1)) || true
    },
}
</script>

<style lang="scss" scoped>
.right{
    width: 100%;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 5px;
    height: 400px;
    padding: 30px 10px;
    .one{
        font-size: 16px;
        span:nth-child(2){
            margin-left: 150px;
        }
    }
    .two{
        margin-top: 20px;
        // text-align: center;
        border-bottom: 1px dashed #ddd;
        height: 80px;
        .rleft{
            display: inline-block;
            .rleft1{
            font-size: 25px;
            font-weight: 900;
            }
            .rleft2{
                font-size: 13px;
                color: #808080;
            }
        }
        .rmid{
            display: inline-block;
            .time{
                margin-left: 22px;
                margin-right: px;
                text-align: center;
                width: 170px;
                font-size: 13px;
                color: #808080;
                border-bottom: 1px solid #ddd;
            }
            .plane{
                // width: 170px;
                margin-left: 20px;
                text-align: center;
                color: #808080;
                font-size: 13px;
                margin-top: 5px;
            }
        }
        .rright{
            margin-left: 12px;
            display: inline-block;
            // margin-left: -10px;
            .rright1{
            font-size: 25px;
            font-weight: 900;
            }
            .rright2{
                font-size: 13px;
                color: #808080;
            }
        }
    }
    .three{
        line-height: 40px;
        margin-top: 20px;
        overflow: hidden;
        .threeleft{
            float: left;
            div:nth-child(1){
                font-size: 15px;
                color: #808080;
            }
            div:nth-child(2){
                font-size: 15px;
                color: #808080;
            }
            div:nth-child(3){
                font-size: 15px;
                color: goldenrod;
            }
        }
        .threeright{
            float: right;
            text-align: right;
            div:nth-child(1){
                font-size: 15px;
            }
            div:nth-child(2){
                font-size: 15px;
            }
            div:nth-child(3){
                font-size: 15px;
            }
        }
    }
    .four{
        margin-top: 10px;
        overflow: hidden;
        div:first-child{
            margin-top: 10px;
            font-size: 20px;
            float: left;
            color: #808080;
        }
        div:last-child{
            font-size: 30px;
            font-weight: 900;
            float: right;
            color: red;
            text-align: right;
        }
    }
    .five{
        font-size: 13px;
        margin-top: 10px;
        text-align: right;
        color: rgb(223, 194, 31);
    }
}
</style>